@import "variables";
@import "mixin";

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff,0 0 20px  #fff,0 0 30px  #fff,0 0 40px  #228DFF,0 0 70px  #228DFF,0 0 80px  #228DFF,0 0 100px #228DFF,0 0 150px #228DFF;
  }

  to {
    text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;
  }
}

#article-list {
  margin-top: 20px;

  .article-body {
    background-color: $article-bg-color;
    @include gal-box-shadow($article-box-shadow);
    &:hover {
      @include gal-box-shadow($hover-box-shadow);
    }
  }

  .article {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 20px;
  }

  i.article-stick {
    position: absolute;
    top: -10px;
    right: 5%;
    font-size: 40px;
    color: $red;
  }

  div.data-article {
    background-color: $purple1;
    border-color: $purple1;
    position: absolute;
    height: 70px;
    width: 70px;
    border-radius: 100px;
    left: -20px;
    top: -20px;
    color: #fff;
    padding-top: 10px;
    > span.month, > span.day {
      text-align: center;
      display: block;
    }
    > span.month {
      margin: 0;
    }
    > span.day {
      font-size: 30px;
      font-weight: bold;
      margin-top: -5px;
    }
  }

  .title-article {
    padding: 10px 15px 0 15px;
    @media (max-width: 767px) {
      padding: 0;
    }
    > h1 {
      font-size: 32px;
      margin: 0 auto;
      text-align: center;
      > a {
        color: $black2;
        text-decoration: none;
        &:hover {
          text-decoration: none;
        }
        > span {
          color: #fff;
          position: static;
          opacity: 0.8;
          background: $indigo;
          font: 90%/1.5 微软雅黑, Verdana, Arial, Helvetica, sans-serif;
          padding: 2px;
          margin: 2px;
          border-radius: 5px;
          &:hover {
            animation: neon 1.5s ease-in-out infinite alternate;
            -webkit-animation: neon 1.5s ease-in-out infinite alternate;
            -moz-animation: neon 1.5s ease-in-out infinite alternate;
            -o-animation: neon 1.5s ease-in-out infinite alternate;
            opacity: 1;
            background-color: rgba(0,0,0,0);
          }
        }
      }
    }

    > center > h4 {
      > a {
        color: $black2;
        text-decoration: none;
        &:hover {
          text-decoration: none;
        }
        > span {
          color: #fff;
          position: static;
          opacity: 0.8;
          background: $indigo;
          font: 90%/1.5 微软雅黑, Verdana, Arial, Helvetica, sans-serif;
          padding: 2px;
          margin: 2px;
          border-radius: 5px;
          &:hover {
            animation: neon 1.5s ease-in-out infinite alternate;
            -webkit-animation: neon 1.5s ease-in-out infinite alternate;
            -moz-animation: neon 1.5s ease-in-out infinite alternate;
            -o-animation: neon 1.5s ease-in-out infinite alternate;
            opacity: 1;
            background-color: rgba(0,0,0,0);
          }
        }
      }
    }

  }

  .tag-article {
    text-align: center;
    line-height: 24px;
    margin: 20px;
  }

  .content-article {
    > .item {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      @include gal-transition($duration:.35s);
      position: relative;
      width: 100%;
      overflow: hidden;
      * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      img {
        width: 100%;
        height: 100%;
      }
      > a {
        color: $content-article-color;
        &:hover {
          text-decoration: none;
          > .img {
            @include gal-transform(scale(1.2));
          }
          > .info {
            visibility: visible;
            opacity: 1;
            > p {
              @include gal-transform(scale(1));
            }
          }
        }
        > .img {
          @include gal-transform(scale(1));
          @include gal-transition($duration:.35s);
        }
        > .info {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          backface-visibility: hidden;
          visibility: hidden;
          opacity: 0;
          background: $content-article-info-bg-color;
          @include gal-transition($duration:.35s);
          > p {
            font-style: italic;
            font-size: 25px;
            position: relative;
            color: $content-article-info-color;
            text-align: center;
            @include gal-transform(scale(5));
            -webkit-transition: all .35s .3s linear;
            -moz-transition: all .35s .3s linear;
            -ms-transition: all .35s .3s linear;
            -o-transition: all .35s .3s linear;
            transition: all .35s .3s linear;
            padding: 20px;
          }
        }
      }
    }



  }

}
